<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>我的答卷</el-breadcrumb-item>
      <el-breadcrumb-item>未答问卷</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="25">
        <!-- <el-col>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="已答问卷" name="answered"> </el-tab-pane>
            <el-tab-pane label="未答问卷" name="unanswered"> </el-tab-pane>
          </el-tabs>
        </el-col> -->

        <el-col :span="10">
          <!-- 搜索区域 -->
          <el-input
            placeholder="请输入搜索内容"
            v-model="pageInfo.query"
            clearable
            @clear="getQestionnaireList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getQestionnaireList"
            ></el-button>
          </el-input>
        </el-col>

        <el-col>
          <!-- 答卷列表 border边框 stripe隔行变色-->
          <el-table :data="questionnaireList" border="" stripe="">
            <!-- 索引列 -->
            <el-table-column type="index"></el-table-column>
            <el-table-column
              width="200"
              label="发布人"
              prop="name"
            ></el-table-column>
            <el-table-column
              width="600"
              label="问卷标题"
              prop="title"
            ></el-table-column>
            <el-table-column
              width="200"
              label="发布时间"
              prop="releaseTime"
            ></el-table-column>

            <!-- <el-table-column label="密码" prop="passwd"></el-table-column>
            <el-table-column label="角色" prop="role"> </el-table-column> -->

            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- 查看 -->
                <el-tooltip
                  effect="dark"
                  content="答卷"
                  placement="top-start"
                  :enterable="false"
                  ><!--文字提示 enterable 隐藏-->
                  <el-button
                    type="primary"
                    icon="el-icon-chat-round"
                    size="mini"
                    @click="showAnswersheet(scope.row)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col>
          <!-- 分页组件 -->
          <div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo.pageNum"
              :page-sizes="[1, 2, 5, 100]"
              :page-size="pageInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 卡片布局 -->
  </div>
</template>

<script>
export default {
  created() {
    this.getQestionnaireList();
  },
  data() {
    return {
      // activeName: "answered", //初始化为已答问卷列表，依靠点击自动切换，无须其他方法

      pageInfo: {
        query: "", //查询信息
        pageNum: 1, //当前页
        pageSize: 5, //每一页最大数
      },
      questionnaireList: [], //问卷列表
      total: 0, //总记录数
      dataShowType: "gird",
      questionnaireListLoading: false,
      addDialogVisible: false, //创建问卷的对话框状态
    };
  },

  methods: {
    // handleClick(tab, event) {
    //   // console.log(tab.index);
    //   if (tab.index == 0) {
    //     //已答问卷
    //   } else {
    //     //未答问卷
    //   }
    // },

    //查看答卷
    showAnswersheet(para) {
      let name = window.sessionStorage.getItem("name");

      let qid = para.qid;
      let title = para.title;
      let content = para.content;
      // console.log(content)

      let pathInfo = this.$router.resolve({
        path: "/answerq",
        query: {
          name: name,
          qid: qid,
          title: title,
          content: content,
          checking: false,
        },
      });
      window.open(pathInfo.href, "_blank");

    },

    //获取问卷列表
    async getQestionnaireList() {
      // console.log(window.sessionStorage)
      // console.log(this.activeName)
      let name = window.sessionStorage.getItem("name");
      let para = {
        query: this.pageInfo.query,
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        name: name,
      };

      const { data: res } = await this.$http.post("needToAnswerY", para);
      if (res.code == "666") {
        // console.log(res.data);
        this.questionnaireList = res.data.list;
        this.total = res.data.total;
      } else {
        alert("查询失败");
      }
    },

    //最大数
    handleSizeChange(newSize) {
      this.pageInfo.pageSize = newSize;
      this.getQestionnaireList();
    },

    //pageNum触发的动作
    handleCurrentChange(newPage) {
      this.pageInfo.pageNum = newPage;
      this.getQestionnaireList();
    },

    //彻底删除问卷
    async deleteQuestionnaire(id) {
      const { data: res } = await this.$http.delete("deleteGarbage?id=" + id);
      if (res != "success") {
        return this.$message.error("删除失败");
      }
      this.$message.success("删除成功");
      this.getQestionnaireList();
    },
  },
};
</script>

<style lang="less" scoped>
/* 面包屑样式 */
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 17px;
}
.my-project-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.back-view {
  display: flex;
  width: 80%;
  align-content: flex-start;
  margin: 10px;
}

.filter-view {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
}

.show-view-type-icon {
  color: white;
  font-size: 18px;
  -webkit-text-stroke: 0.5px #a8a8a8;
  margin: 5px;
  cursor: pointer;
}

.show-view-type-icon-active {
  color: rgba(92, 155, 249, 100);
  -webkit-text-stroke: 0.5px rgba(92, 155, 249, 100);
}

.project-grid-container {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: center;
}

.project-grid-view {
  display: flex;
  width: 1045px;
  flex-direction: row;
  flex-wrap: wrap;
}

.project-table-view {
  margin-top: 20px;
  width: 80%;
}

/* .project-grid-item-view {
  width: 169px;
  height: 199px;
  line-height: 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  margin: 20px;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

  .project-title {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: left;
    line-height: 20px;
    max-height: 20px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-grid-view-status {
    display: inline-block;
    width: 7px;
    height: 7px;
    line-height: 20px;
    background-color: rgba(0, 110, 255, 100);
    text-align: center;
    border: 1px solid rgba(0, 110, 255, 100);
    border-radius: 20px;
  }
} */

.gird-operating-btns {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  bottom: 0;
  display: none;
  border: none;
}

.project-grid-item-view:hover .gird-operating-btns {
  display: block;
}

.project-grid-view-preimg {
  width: 143px;
  height: 121px;
}

.project-grid-view-time {
  color: rgba(144, 147, 153, 100);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  margin: 0;
}

.project-page-view {
  margin-top: 30px;
}
</style>